import React, { useEffect, useState } from 'react'
import { Redirect, useLocation } from 'umi'
import { Carousel } from 'antd';
import { NavBar, Space, Toast } from 'antd-mobile'
import axios from 'axios';
import './index.less'

export default function Films(props: any) {
  const { history } = props
  const [list, setList] = useState([])
  useEffect(() => {
    axios({
      method: 'GET',
      url: 'https://m.maizuo.com/gateway?cityId=420100&pageNum=2&pageSize=10&type=1&k=8479377',
      headers: {
        'X-Client-Info': '{ "a": "3000", "ch": "1002", "v": "5.2.1", "e": "16801628172267442084577281", "bc": "420100" }',
        'X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res => {
      console.log(res.data);
      setList(res.data.data.films)
    })
  }, [])
  const location = useLocation()
  console.log(location);
  if (location.pathname === '/films' || location.pathname === '/films/') {
    return <Redirect to='/films/nowplaying' />
  }
  function gotoDetail(id: string) {
    history.push(`/details/${id}`)
  }
  function locationChoose() {
    history.push('/city')
  }
  return (
    <div>
      <NavBar className='bgc' onBack={locationChoose} left="定位">电影</NavBar>
      <div className="banner">
        <Carousel autoplay>
          {
            list.map((val: any) => {
              return <img src={val.poster} key={val.filmId} />
            })
          }
        </Carousel>
      </div>
      <ul>
        {
          list.map((val: any) => {
            return <li key={val.filmId} onClick={() => { gotoDetail(val.filmId) }}>{val.name}</li>
          })
        }
      </ul>

      {props.children}
    </div >
  )
}